<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate('添加属性')">
        添加属性类型
      </el-button>
    </div>
    <el-table
      :data="data"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <!-- <el-table-column prop="attr_id" label="序号" align='center'/> -->
      <el-table-column prop="attr_name" label="属性类型" align='center'/>
      <el-table-column label="企业端是否显示" align='center'>
        <template slot-scope="item">
          <el-switch
            v-model="item.row.business_is_show"
            :active-value="1"
            :inactive-value="0"
            @change="attrUpdate(item.row,'business_is_show')"
          />
        </template>
      </el-table-column>
      <el-table-column label="排序" align='center'>
        <template slot-scope="item">
          <el-input v-model="item.row.business_sort" type='number' @blur="attrUpdate(item.row,'business_sort')"/>
        </template>
      </el-table-column>
      <el-table-column label="个人端是否显示" align='center'>
        <template slot-scope="item">
          <el-switch
            v-model="item.row.person_is_show"
            :active-value="1"
            :inactive-value="0"
            @change="attrUpdate(item.row,'person_is_show')"
          />
        </template>
      </el-table-column>
      <el-table-column label="排序" align='center'>
        <template slot-scope="item">
          <el-input v-model="item.row.person_sort" type='number' @blur="attrUpdate(item.row,'person_sort')"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" width='300' align='center'>
        <template slot-scope="item">
          <el-link type="primary" class="table_btn" @click="handleDetails(item.row)" :underline="false"><i class="iconfont icon-chakan"></i>查看</el-link>
          <el-link type="primary" class="table_btn" @click="handleUpdate(item.row)" :underline="false"><i class="iconfont icon-bianji"></i>编辑</el-link>
          <el-link type="primary" class="table_btn" @click="handleCreateChild(item.row)" :underline="false"><i class="el-icon el-icon-plus"></i>添加</el-link>
          <el-link type="danger" class="table_btn" @click="handleDelete(item.row.attr_id)" :underline="false"><i class="iconfont icon-lajitong1"></i>删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      class="pagination-container"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paginate.current"
      :hide-on-single-page='isHideSingle'
      :page-sizes="paginate.sizes"
      :page-size="paginate.limit"
      :layout="paginate.layout"
      :total="paginate.total"/>
    <!------------------------- 新增，编辑属性 ------------------------------>
    <el-dialog :visible.sync="formVisible" width="516px" @close="handleCancel">
      <div slot="title" class="dialog-title">{{title}}</div>
      <el-card class="el-card-border">
        <el-form :ref="formName" :model="formFieldsData" :rules="rules" label-width='100px' :label-position="labelPosition">
          <el-form-item label="属性名称：" prop="attr_name">
            <el-input v-model="formFieldsData.attr_name" clearable />
          </el-form-item>
          <el-form-item label="个人端：">
            <el-form-item label="是否显示" label-width='80px'>
              <el-switch
                v-model="formFieldsData.person_is_show"
                :active-value="1"
                :inactive-value="0"
                class="switch_btn"
              />
            </el-form-item>
            <el-form-item label="排序：" label-width='80px' style="margin:0!important">
              <el-input v-model="formFieldsData.person_sort" clearable class="flex1"/>
            </el-form-item>
          </el-form-item>
          <el-form-item label="企业端：">
            <el-form-item label="是否显示" label-width='80px'>
              <el-switch
                v-model="formFieldsData.business_is_show"
                :active-value="1"
                :inactive-value="0"
                class="switch_btn"
              />
            </el-form-item>
            <el-form-item label="排序：" label-width='80px'>
              <el-input v-model="formFieldsData.business_sort" clearable class="flex1"/>
            </el-form-item>
          </el-form-item>
        </el-form>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel" size='medium'>取 消</el-button>
        <el-button type="primary" @click="handleSubmit" size='medium'>确 定</el-button>
      </div>
    </el-dialog>
    <addChildAttr ref='addChildAttr'></addChildAttr>
  </div>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
import addChildAttr from '../components/addChildAttr.vue'
export default {
  name: 'Index',
  mixins: [formOperate],
  data() {
    return {
      url:'/profession/admin/attrType',
      queryParam:{
        page:1,
        pages_index:10
      },
      pk:'attr_id',
      postList:[
        {value_id:1,value_name:'司机'},
        {value_id:2,value_name:'维修'}
      ],
      formName: 'talentsAttr',
      formFieldsData: {
        attr_name: '',
        type:'',
        parent_id:'',
        befter_id:'',
        person_is_show:0,
        person_sort: '',
        business_is_show: 0,
        business_sort:''
      },
      // 验证规则
      rules: {
        attr_name: [
          { required: true, message: '请输入属性名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        person_is_show: [
          { required: true, message: '请选择是否显示' }
        ],
        business_is_show: [
          { required: true, message: '请选择是否显示' }
        ]
      }
    }
  },
  methods: {
    // 修改企业端个人端是否显示，排序
    attrUpdate(item,type) {
      this.id = item.attr_id
      let param = {}
      param[type] = item[type]
      this.$http.put(this.url + '/' + this.id, param).then((response) => {
        this.handleResponse(response)
      })
    },
    // 添加子属性
    handleCreateChild(item) {
      let param = {
        parent_id:item.parent_id,
        attr_id:item.attr_id,
        attr_name:item.attr_name
      }
      this.$refs.addChildAttr.show(param)
    },
    // 查看子属性列表
    handleDetails(item) {
      let query = {
        labelType:1,
        attr_type:item.attr_id,
        parent_id:item.parent_id,
        attr_name:item.attr_name
      }
      this.$router.push({path:'/talents/childAttr/1',query:query})
    }
  },
  components: {
    addChildAttr
  }
}
</script>
<style lang="scss" scoped>
.isShow{
  margin-bottom:18px;
}
.switch_btn{
  margin-right: 30px;
}
</style>